<template>
  <div class="roomGeneralViewDetail" v-loading="loading">
    <el-row class="roomGeneralViewDetail-a">
      <el-col :span="12">
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.alarmTimeSet}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.startTimeSecond}}</el-col>
          <el-col :span="12">
            <el-input v-model.number="silentTime" prefix-icon="el-icon-time" class="startTimeSecond" :readonly="readonlySilentTime"></el-input>
            <span style="margin-right:5px;">{{roomGeneralViewManagement.minute}}</span>
            <kt-button class="btn0 boxShadowButton" :label="roomGeneralViewManagement.search" :disabled="disabledSetAlarmTime" @click="handleSetAlarmTime"/>
          </el-col>
        </el-row>
        <el-row class="height50">
          <el-col v-if="silentStatus==false" class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.alarmoff}}</el-col>
          <el-col v-else class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.alarmOn}}</el-col>
          <el-col :span="12"><el-switch v-model="silentStatus" @change="changeSwitch" active-color="#13ce66" inactive-color="#ccc"></el-switch></el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.baseInfo}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.roomNo}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.roomNo}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.resident}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.oldName}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.roomTemperatureState}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.roomTemperature}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.temperature}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.vitalSigns}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.inBed}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.inBed}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.heartState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.heartbeat}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.breathState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.breath}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row style="margin-top:10px;" class="moHu">
          <div style="width:100%;height:420px" :class="filterBlur">
            <!-- 视频模块 -->
            <img v-if="videoFlag==false && picture==''" :src="image.shexiangtou" alt="" class="roomGeneralViewDetail-a-res"/>
            <img v-if="videoFlag==false && picture!=''" :src="picture" alt="" class="roomGeneralViewDetail-a-res"/>
            <!-- <div class="Ckplayer" v-if="videoFlag==true">
              <div id="video" ref="video_ck"></div>
            </div> -->
            <video v-if="videoFlag==true" id="remoteVideo" class="remotevideo" autoplay="autoplay">
            </video>
          </div>
          <div class="arc" v-if="videoFlag==true" id="loading">
          </div>
          <i @click="videoPlayPause" v-if="videoFlag==true" :class="isVideoPlay?'el-icon-video-pause':'el-icon-video-play'" id="videoPlayPause" :style=" alertPlayFlag?'bottom: -10px;':''"/>
          <i @click="videoSmBig" v-if="videoFlag==true" class="el-icon-full-screen" id="videoSmBig" :style=" alertPlayFlag?'bottom: -10px;':''"/>
          <!-- class="alarmMessage blink" 去掉动画-->
          <div v-if="videoFlag==true && !alertPlayFlag"><div :class="`${languageClass ? 'alarmMessageJp' : 'alarmMessage'}`">{{roomGeneralViewManagement.videoAlarmMessage}}</div></div>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-b height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessage}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span=20>
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValueTable"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span=4>
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.search"
          @click="serachAlarmTable"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-c">
      <el-table
        style="width:100%"
        :data="tableData"
        :border="false"
        :header-cell-style="tableHeaderColor"
        :row-style="tableRowStyle"
        @row-click="handleAlertClick"
      >
        <el-table-column prop="createdTime" align="center" :label="roomGeneralViewManagement.occurrenceTime" min-width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alertType" :formatter="formatAlertType" align="center" :label="roomGeneralViewManagement.condition" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="updateTime" align="center" :label="roomGeneralViewManagement.acknowledgingTime" min-width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="lastOperator" align="center" :label="roomGeneralViewManagement.affirmant" min-width="100" :show-overflow-tooltip="true"></el-table-column>
        <!-- by guo 2020-03-09-13:51添加  警报录像播放按钮 -->
        <el-table-column :label="roomGeneralViewManagement.opertion" min-width="50" align="center">
          <template slot-scope="scope">
            <img class="handedness" v-if="alertPlayFlag && scope.row.videoPlayIconShow && isVideoPlay" :src="image.life_video_push" alt="" @click="alarmVideoPushClick(scope.$index,scope.row)">
            <img class="handedness" v-else :src="image.life_video_play" alt="" @click="alarmVideoPlayClick(scope.$index,scope.row)">
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenyeTwo">
      </el-pagination>    
    </el-row>
    <el-row style="margin-top:40px;">
      <kt-button
        v-if="alarmSurefalg"
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
      <kt-button
        v-else
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
    </el-row>
    <el-row class="roomGeneralViewDetail-d height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessageOutput}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span=20>
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValue"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span=4>
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.cSVOutput"
          @click="handleCsvOutput"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-f height40">
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.backList"
          @click="handleBackList"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <kt-button
          class="btn1 boxShadowButton"
          :label="roomGeneralViewManagement.vitalSignsDetail"
          @click="handleDetail"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <kt-button
          :icon="(videoFlag && urgencySureFlag && !alertPlayFlag) ? 'el-icon-video-pause' : 'el-icon-video-play'"
          class="btn2 boxShadowButton"
          :label="(videoFlag && urgencySureFlag && !alertPlayFlag) ? roomGeneralViewManagement.confirmCompleted : roomGeneralViewManagement.urgentConfirmation"
          @click="handleUrgencySure"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import realVideo from "../../../assets/lifeGroupimg/realVideo.png";
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
import juxing_red from "../../../assets/lifeGroupimg/juxing_red.png"; 
import shexiangtou from "../../../assets/lifeGroupimg/shexiangtou.png";
import life_video_play from "../../../assets/lifeGroupimg/life_video_play.png";
import life_video_push from "../../../assets/lifeGroupimg/life_video_push.png";
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import {baseURL} from "../../../api/http.js";
import mqtt from "mqtt"; //导入mqtt
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
  MQTT_CLIENTID,
} from "../../../api/http.js";
export default {
  name: "RoomGeneralViewDetail",
  data() {
    return {
      roomGeneralViewManagement: this.$t("m.roomGeneralViewManagement"), //引入 lang 里面的字符串资源,
      size:"medium",//按钮的尺寸
      id: "",
      image: { realVideo, juxing_Small ,shexiangtou,life_video_play,life_video_push},
      backgroundImage:"",
      disabledSetAlarmTime:false,//报警屏蔽时间的按钮是否可以点击
      readonlySilentTime:false,//是否可读
      silentTime:"",//报警屏蔽时间
      silentStatus:false,//报警设置开关  false---关   true---开
      silentStatusRoom:false,//用来判断房间是否设置了警报屏蔽
      alarmSurefalg:false,
      alertPlayFlag:false,
      cameraInfo:{},
      lifeRoomInfo:{
        roomNo:"",
        oldName:"",
        temperature:"",
        inBed:"",
        heartbeat:"",
        breath:"",
      },
      isVideoPlay:true,
      videoFlag:false,//默认为false 静态图片显示 视频播放隐藏  当点击了紧急按钮之后状态为true 视频播放显示  静态图片隐藏
      urgencySureFlag:false,//用于判断实时视频按钮的播放和切换  true--播放   false--停止
      tableData:[],
      timeValueTable:"",//报警列表的查询,时间
      /* 分页的 */
      currentPage:1, //初始页
      pageNum:1,//页码
      pageSize:5,//每页显示的条数
      totalDataNumber:0,//数据的总数,
      timeValue:"",//报警导出的查询时间
      pickerOptions:{
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      bedDeviceNo:"",//床垫的设备编号
      roomId:"",
      deviceNo:"",//摄像头的设备编号
      picture:"",
      alertId:"",
      isHandle:"",
      groupId:"",
      filterBlur: "filter-blur0",
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
      flashFlag:true,//flash默认是关闭的--true
      languageClass:true,
      conn:null,
      /* ckplayer播放器的配置 */  //by guo 2020-2-23-16:12添加
      videoObjectPc: {
        width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 574, // 高度，也可以支持百分比
        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
        autoplay: true, //自动播放
        live: true,
        video: "", //视频地址 rtmp://58.200.131.2:1935/livetv/hunantv
      },
      videoSrc:"",//获取需要播放的url
      options :{
        connectTImeout: 4000,//超时连接的时间
        clientId: MQTT_CLIENTID,
        //clientId: "mqtitId-" + new Date().getTime(),
        //clientId: 'mqtitId-Home',
        username: MQTT_USERNAME,
        password: MQTT_PASSWORD,
        clean: true
      },
      client:"",
      msg: "", //mqtt推送的消息
      cameraStatus:"",//摄像头的状态
      alertVideoFlag:"",//报警录像是否存在 true存在  false不存在
      loading:false,//页面加载的loading by guo 2020-3-23-13:55添加
      rowAlartId:"",
    };
  },
  methods: {
    /* 
      mqtt 2020-2-28-10:50添加
    */
    mqttMSG() {
     this.client=mqtt.connect(MQTT_SERVICE, this.options);
      // mqtt连接
      this.client.on("connect", e => {
        console.log(e);
        console.log("连接成功:");
        let deviceNo = this.bedDeviceNo;//床垫的设备编号;
        let topic = "FRONT_CLIENT_" + deviceNo; // deviceNo 是守护佳床垫设备编号
        this.client.subscribe(topic, error => {
          console.log(topic,"topic")
          if (!error) {
            console.log("-----------------gzh: 订阅成功");
          } else {
            console.log("-----------------gzh: 订阅失败");
          }
        });
      });
      // 接收消息处理
      this.client.on("message", (topic, message) => {
        console.log("收到来自", topic, "的消息", message.toString());
        this.msg = message.toString();
        console.log(this.msg);
        this.msg = JSON.parse(this.msg);
        console.log(this.msg);
        if(this.msg.status=="online"){
          //by guo 2020-4-2 16:10修改
          //在离床
          if(this.msg.inBed==0){
            this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").inBedZero;
          }else{
            this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").inBedOne;
          }
          //去除心跳为-1和0的数据
          if(this.msg.heartbeat!=-1 && this.msg.heartbeat!=0){
            this.lifeRoomInfo.heartbeat=this.msg.heartbeat;
          }else{
            this.lifeRoomInfo.heartbeat='--';
          }
          //去除呼吸为-1和0的数据
          if(this.msg.breath!=-1 && this.msg.breath!=0){
            this.lifeRoomInfo.breath=this.msg.breath;
          }else{
            this.lifeRoomInfo.breath='--';
          }
          // if(this.msg.heartbeat!=-1){//在线 by guo 2020-3-2-21:55添加
          //   this.lifeRoomInfo.heartbeat=this.msg.heartbeat;
          //   this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").inBedOne;
          // }else{
          //   this.lifeRoomInfo.heartbeat='--';
          //   this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").inBedZero;
          // }
          // if(this.msg.breath!=-1){
          //   this.lifeRoomInfo.breath=this.msg.breath;
          // }else{
          //   this.lifeRoomInfo.breath='--';
          // }
        }else{//离线 by guo 2020-3-2-21:55添加
          this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").offline;
          this.lifeRoomInfo.heartbeat='--';
          this.lifeRoomInfo.breath='--';
        }
      });
      // 断开发起重连
      this.client.on("reconnect", error => {
        console.log("正在重连:", error);
      });
      // 链接异常处理
      this.client.on("error", error => {
        console.log("连接失败:", error);
      });
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的播放
    */
    alarmVideoPlayClick(index,row){
      console.log(index);
      console.log(row);
      console.log(this.tableData);
      var isHavePlayFlag = false;
      var currentPlayIndex = 0;
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i].videoPlayIconShow == true){
            isHavePlayFlag = true;
            currentPlayIndex = i;
            this.tableData[i].videoPlayIconShow = false;
        }
      }
      if(isHavePlayFlag && currentPlayIndex == index){
          this.tableData[currentPlayIndex].videoPlayIconShow = true;
          var remoteVideoview = document.getElementById('remoteVideo');
          if (remoteVideoview.paused) {
            remoteVideoview.play(); 
            this.isVideoPlay = true;
          }

        return;
      }
      if(row.videoPlayIconShow == null || row.videoPlayIconShow == false){
        if(isHavePlayFlag){
          this.tableData[currentPlayIndex].videoPlayIconShow = null;
        }
        this.rowAlartId=row.alertId;//获取点击播放的录像的alertId
        row.videoPlayIconShow = true;
        this.tableData[index].videoPlayIconShow = true;
        console.log(row);
        console.log(this.tableData);
        this.alertVideoShow(row);
      }

    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的暂停
    */
    alarmVideoPushClick(index,row){
      console.log(row);
      console.log(this.tableData);
      this.rowAlartId=row.alertId;//获取点击播放的录像的alertId
      if(row.videoPlayIconShow ==true){
        var remoteVideoview = document.getElementById('remoteVideo');
        remoteVideoview.pause(); 
        this.isVideoPlay = false;
      }

    },

    /* 
      by guo 2020-3-10-13:07添加
      通过报警id查询警报录像
    */
    alertVideoShow(row){
      console.log(row);
      this.$postForm("dmc/camera/play", {alertId:row.alertId},this.acceptLanguage).then(res => {
          if(res.code == 200){
            this.cameraInfo = res.result;
            this.videoFlag=true;//点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
            this.urgencySureFlag=true;//by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
            this.alertPlayFlag = true;//报警播放标识符;
            setTimeout(()=>{
              this.initSkyRtc();
            },10)
          }else{
            this.$message({message:res.message,type:'error'})
          }
        });
    },
    /* 
      查询图片
    */
    getPicture(deviceNo){
      if(deviceNo!=""){
        let params=new Object();
        params.deviceNo=deviceNo;
        console.log(params);
        this.$postForm(this.ports.roomGeneralViewManagement.getPicture,params,this.acceptLanguage).then(res=>{
          console.log(res,"查询拍摄的图片");
          if(res.code==200){
            if(res.result!=null){
              if(res.result.picture!=''){
                //var backgroundImage=res.result.picture;
                // this.picture='data:image/jpg;base64,'+backgroundImage;
                var backgroundImage=res.result.pictureUrl;//by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
                this.picture=backgroundImage;//by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
              }else{
                this.picture="";
              }
            }else{
              this.picture="";
            }
          }
        })
      }
    },

    /* 
      设置房间的报警时长
    */
    handleSetAlarmTime(){
      let params=new Object();
      params.roomId=this.roomId*1;
      params.silentTime=this.silentTime;//报警屏蔽时间
      var res=/^[0-9]{1,3}$/;
      if(this.silentTime===0){
        console.log(this.silentStatus,this.silentStatusRoom);
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numNotZero,type:"error"});
      }else if(!res.test(this.silentTime)){
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numLength3,type:"error"});
      }else {
        this.$postJson(this.ports.roomGeneralViewManagement.roomSilentTime,params,this.acceptLanguage).then(res=>{
          console.log(res);
          if(res.code==200){
            this.queryRoomAlartStatus(this.roomId);
            this.$message({message:res.message,type:"success"});
          }else{
            this.$message({message:res.message,type:"error"});
          }
        })
      }
    },

    /* 
      设置报警屏蔽的开关
    */
    roomAlertStatus(){
      let params=new Object();
      params.roomId=this.roomId*1;
      params.silentTime=this.silentTime;//报警屏蔽时间
      var res=/^[0-9]{1,3}$/;
      if(this.silentTime===0){
        console.log(this.silentStatus,this.silentStatusRoom);
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numNotZero,type:"error"});
      }else if(!res.test(this.silentTime)){
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numLength3,type:"error"});
      }else {
        this.$postJson(this.ports.roomGeneralViewManagement.roomAlertStatusTwo,params,this.acceptLanguage).then(res=>{
          console.log(res);
          if(res.code==200){
            this.queryRoomAlartStatus(this.roomId);
            this.$message({message:res.message,type:"success"});
          }else{
            this.$message({message:res.message,type:"error"});
          }
        })
      }
    },

    /* 
      报警屏蔽解除
    */
    deleteRoomAlertStatus(){
       this.$deleteList(this.ports.roomGeneralViewManagement.roomAlertStatus+this.roomId,{},this.acceptLanguage).then(res=>{
        console.log(res);
        if(res.code==200){
          this.queryRoomAlartStatus(this.roomId);
          this.$message({message:res.message,type:"success"});
        }else{
          this.$message({message:res.message,type:"error"});
        }
      })
    },

    /* 
      查询房间的报警状态
    */
    queryRoomAlartStatus(roomId){
      this.$getForm(this.ports.roomGeneralViewManagement.roomAlertStatus+roomId,{},this.acceptLanguage).then(res=>{
        console.log(res);
        if(res.code==200){
          this.silentTime=res.result.defaultSilentTime;
          this.silentStatus=res.result.silentStatus==0 ? false : true;
          this.silentStatusRoom=res.result.silentStatus==0 ? false :true;//用来判断房间是否设置了警报屏蔽
          if(this.silentStatusRoom==true){
            this.readonlySilentTime=true;
            this.disabledSetAlarmTime=true;
          }else{
            this.readonlySilentTime=false;
            this.disabledSetAlarmTime=false;
          }
        }
      })
    },

    /* 
      报警开关的change事件
    */
    changeSwitch(){
      console.log(this.silentStatus);
      return this.silentStatus==true ? this.roomAlertStatus() : this.deleteRoomAlertStatus();
    },

    /* 
      点击报警列表某一行
    */
    handleAlertClick(row, event, column){
      this.alertId=row.alertId;
      this.isHandle=row.isHandle;//获取报警处理的状态
    },

    /* 
      确认完成
    */
    handleSureComplete(){
      // this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
      //this.initVideo();//by guo 2020-3-22-23-54修改
      if(this.alertId!=""){
        if(this.isHandle==0){
          this.updateAlert(this.alertId);
        }else{
          this.$message({message:this.$t("m.roomGeneralViewManagement").hasdealalarm,type:"error"});
        }
      }else{
        this.$message({message:this.roomGeneralViewManagement.selectAlarmInfo,type:"error"});
      }
    },
    
    /* 
      CSV输出
    */
    handleCsvOutput(){
      if(this.tableData.length!=0){
        let params=new Object();
        params.roomId=this.roomId;
        params.groupId=this.groupId;
        if(this.timeValue!=""){
          params.startTime=this.timeValue[0]+" 00:00:00";
          params.endTime=this.timeValue[1]+" 23:59:59";
        }
        //判断是否传了开始时间和结束时间
        if(this.timeValue!=""){
          window.location.href = baseURL+this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoomToExcel+`?roomId=${params.roomId}&groupId=${params.groupId}&startTime=${params.startTime}&endTime=${params.endTime}`;
        }else{
          window.location.href = baseURL+this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoomToExcel+`?roomId=${params.roomId}&groupId=${params.groupId}`;
        }
      }else{
        this.$message({message:this.$t("m.roomGeneralViewManagement").noAlarmInfo,type:"error"});
      }
    },

    /* 
      返回列表
    */
    handleBackList(){
      bus.$emit("homePage",{type:"remove",path:"/RoomGeneralViewDetail",showpath:"/RoomGeneralViewManagement"});
    },

    /* 
      通过房间id获取设备编号和设备信息
    */
    queryDevice(roomId){
      console.log(roomId);
      this.$postJson(this.ports.roomGeneralViewManagement.queryDevice+roomId,{},this.acceptLanguage).then(res=>{
        if(res.code==200){
          if(res.result!=null || res.result.length!=0){
            for(var i=0;i<res.result.length;i++){
              if(res.result[i].deviceType==12){//deviceType==12为摄像头
                this.deviceNo=res.result[i].deviceNo;
                //this.cameraStatus=res.result[i].status;//by guo 2020-2-28-15:03添加 摄像头的状态
              }else if(res.result[i].deviceType==9){//deviceType==9为床垫
                this.bedDeviceId=res.result[i].deviceId;
                this.bedDeviceNo=res.result[i].deviceNo;
              }
            }
          }else{
            this.deviceNo="";
            this.bedDeviceId="";
          }
          console.log(this.deviceNo,this.bedDeviceId);
          this.getPicture(this.deviceNo);
          this.queryLifeRoomInfo(roomId);
        }
      })
    },

    /* 
      根据房间id查询房间的信息
    */
    queryLifeRoomInfo(roomId){
      this.$postJson(this.ports.roomGeneralViewManagement.queryLifeRoomInfo+roomId,{},this.acceptLanguage).then(res=>{
        console.log(res,"查询房间信息");
        if(res.code==200){
          this.lifeRoomInfo.roomNo=res.result[0].roomNo;
          this.lifeRoomInfo.oldName=res.result[0].oldName==null ? '--' : res.result[0].oldName;
          this.lifeRoomInfo.temperature=res.result[0].temperature==null ? '--' : res.result[0].temperature;
          //this.lifeRoomInfo.inBed=(res.result[0].inBed==null && this.bedDeviceId!=undefined) ? this.$t("m.roomGeneralViewManagement").offline : ((res.result[0].inBed==null && this.bedDeviceId==undefined) ? '--' : (res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedZero : this.$t("m.roomGeneralViewManagement").inBedOne));
          //by guo 2020-4-24-13:27 修改 添加了inBed=3为床垫离线
          this.lifeRoomInfo.inBed=(res.result[0].inBed==null && this.bedDeviceId!=undefined) ? this.$t("m.roomGeneralViewManagement").offline : ((res.result[0].inBed==null && this.bedDeviceId==undefined) ? '--' : (res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedZero : ( res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedOne : this.$t("m.roomGeneralViewManagement").offline)));
          this.lifeRoomInfo.heartbeat=(res.result[0].heartbeat==-1 || res.result[0].heartbeat==null || res.result[0].heartbeat==0) ? '--' : res.result[0].heartbeat;
          this.lifeRoomInfo.breath=(res.result[0].breath==-1 || res.result[0].breath==null || res.result[0].breath==0) ? '--' : res.result[0].breath;
        }
      })
    },

    /* 
      查询报警列表按钮
    */
    serachAlarmTable(){
      console.log(this.timeValueTable);
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      查询房间报警列表
    */
    queryDeviceAlertLifeRoom(roomId){
      let params=new Object();
      params.roomId=roomId;
      params.pageNum=this.pageNum;
      params.pageSize=this.pageSize;
      if(this.timeValueTable!="" && this.timeValueTable!=null && this.timeValueTable!=undefined){
        params.startQueryTime=this.timeValueTable[0]+" 00:00:00";;
        params.endQueryTime=this.timeValueTable[1]+" 23:59:59";
      }
      console.log(this.rowAlartId,this.alertVideoFlag,"++++++++++--------")
      this.$postJson(this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoom,params,this.acceptLanguage).then(res=>{
        this.tableData=[];
        if(res.code==200){
          if(res.result.list!=null){
            this.pageSize=res.result.pageSize;
            this.currentPage=res.result.pageNum;
            this.totalDataNumber=res.result.total*1;
            //by guo 2020-4-3-8:27修改
            res.result.list.forEach(item=>{
              if(this.rowAlartId==item.alertId){
                if(this.alertPlayFlag==true){
                  item.videoPlayIconShow=true;
                }
              }else{
                item.videoPlayIconShow=false;
              }
            })
            this.tableData=res.result.list;
          }else{
            this.tableData=[];
            this.pageSize=10;
            this.currentPage=1;
            this.totalDataNumber=0;
          }
        }else{
          this.tableData=[];
          this.pageSize=10;
          this.currentPage=1;
          this.totalDataNumber=0;
        }
      })
    },
    
    /* 
      处理报警列表
    */
    updateAlert(alertId){
      this.$postJson(this.ports.roomGeneralViewManagement.updateAlert+alertId,{},this.acceptLanguage).then(res=>{
        if(res.code==200){
          this.queryDeviceAlertLifeRoom(this.roomId);
          //this.$message({message:res.message,type:'success'});
          this.$message({message:this.roomGeneralViewManagement.hasdealalarmSuccess,type:"success"});//by guo 2020-3-18-12:11修改
          this.$bus.$emit("refreshalarmTitle");//通知去刷新首页报警提示和房一览信息页面
        }else{
          this.queryDeviceAlertLifeRoom(this.roomId);
          // this.$message({message:res.message,type:'error'});
          this.$message({message:this.roomGeneralViewManagement.hasdealalarm,type:"error"});//by guo 2020-3-18-12:11修改
        }
      })
    },
    videoSmBig(){
      var remoteVideoview = document.getElementById('remoteVideo');
        //isVideoSm
        if (remoteVideoview.requestFullscreen) {
            remoteVideoview.requestFullscreen();
        } else if (remoteVideoview.mozRequestFullScreen) {
            remoteVideoview.mozRequestFullScreen();
        } else if (remoteVideoview.webkitRequestFullScreen) {
            remoteVideoview.webkitRequestFullScreen();
        }
    },
    videoPlayPause(){
      var remoteVideoview = document.getElementById('remoteVideo');
      if (remoteVideoview.paused) {
        remoteVideoview.play();
        this.isVideoPlay = true;
      } else{
        remoteVideoview.pause();
        this.isVideoPlay = false;
      } 
    },
    /* 
      生体详情
    */
    handleDetail(){
      console.log(this.bedDeviceId);
      if(this.bedDeviceId!='' && this.bedDeviceId!=null && this.bedDeviceId!=undefined){
        sessionStorage.setItem("bedDeviceId",this.bedDeviceId);
        sessionStorage.setItem("bedDeviceNo",this.bedDeviceNo);
        bus.$emit("homePage", {
          type: "jump",
          path: "/LifesignDetail",
          title: this.roomGeneralViewManagement.vitalSignsViewDetail,
        });
      }else{
        this.$message({message:this.$t("m.roomGeneralViewManagement").unbindBed,type:"error"});
      }
    },
    initSkyRtc(){
        //RTCPeerConnection
        var myPeerConnection = null;
        var myDataChannel = null;
        // MediaStream from webcam
        var stream = null;
        //当前客户端的RTCPeerConnection是否创建了
        var RTCPeerConnectionCreated = false;
        var StartCalled = false;
        var peerid ="";
        var meid=uuid();
        var sessionId = uuid();
        var connectmode ="live";
        var connectsource ="MainStream";
        var outThat = this;
        var conn = null;
        var remoteVideo = null;
        var IceCandidate = new Array();
        var IsLocalAudioTrack = false;
        var IsLocalVideoTrack = false;
        var IsLocalDataChannel = true;
        var messagecallback = null;
        var IsWebSocketConnected = false;
        var IsWebSocketCreateed = false;
        var IsVideoPlaying = false;
        var isChrome =navigator.userAgent.indexOf("Chrome") !== -1 //Chrome 浏览器
        //关闭流
        console.log(outThat.conn);
        if(outThat.conn!=null){
          conn = outThat.conn;
          conn.close();
        }
        RHRTCLoad(this.cameraInfo);
        outThat.isVideoPlay = true;
        function RHRTCLoad(cameraInfo) {
          var remoteVideoview = document.getElementById('remoteVideo');
          console.log(remoteVideoview);
          console.log(cameraInfo.host);
	      	RHRTCStart(cameraInfo.toclientid,remoteVideoview,cameraInfo.conmode,cameraInfo.consource,cameraInfo.host);
        }
    

        //using Google public stun server
        var configuration = {
            "iceServers": [
            //   {
            //     'urls': [
            //         'stun:stun.l.google.com:19302',
            //         'stun:stun.l.google.com:19302?transport=udp',
            //     ]
            // },{
            //     'urls':[
            //         // 'turn:webrtc.qq-kan.com:3478?transport=udp'
            //         'turn:47.114.138.11:3478?transport=udp'
            //     ],
            //     "username":"1001",
            //     "credential":"123456"
            // }
            ]
        };


        //用于当视频开始播放的时候。把进度条等等做隐藏
        function changeVideocanvas() {
            console.log("stream is playing-------------");
            IsVideoPlaying = true;
            var loading = document.getElementById('loading'); 
            loading.style.display="none";
        };

        /**
         * 主要接口：
         * 主要起动Webrtc函数 
         * 
         * @param server      链接服务器地址 
         * @param serno       远程的设备号
         * @param videoview   远程音视频需要显示的<video/>标签
         * @param conmode    链接模式 有两种,string 类型  一种是实时流（"live"），一种是播放流 （"play"）
         * @param consource    在 conmode 是实时流的时候, consource 为 主码流或者是子码流 ("MainStream", "SubStream") 
          *                    在 conmode 是播放流的时候, 是需要播放的文件名
          * twowayaudio
         * @param datachannel   是否使用  RTCDataChannel 发送交互数据 , bool (true or false)
         */
        function RHRTCStart(toclientid,videoview,conmode,consource,wsurl) {
            console.log(videoview);
            if(videoview!=null){
              videoview.addEventListener('playing', changeVideocanvas);
              videoview.addEventListener('pause', function () { //暂停开始执行的函数
                  console.log("暂停播放");
                  outThat.isVideoPlay = false;
              });
              videoview.addEventListener('play', function () { //暂停开始执行的函数
                  console.log("继续播放");
                  outThat.isVideoPlay = true;
              });
              videoview.addEventListener('ended', function () { //暂停开始执行的函数
                  console.log("暂停结束");
                  outThat.isVideoPlay = false;
              });
            }
            //注意：
            //需要音频对讲，需要调用 get.UserMedia 获取流在创建 RTCPeerConnection 的时候。通过 addTrack 或者是 addStream 添加到 RTCPeerConnection 不然只能单向 
            remoteVideo = videoview;
            // ==>0 ---- //
            console.log('isChrome==true');
            IsLocalAudioTrack = true;
            remoteVideo.muted = true;
            IsLocalDataChannel = true;
            peerid =toclientid;
            meid=uuid();
            sessionId = uuid();
            connectmode = conmode;
            connectsource = consource;
            console.log(wsurl);
            console.log(meid);
            console.log("ws://"+wsurl+'/'+meid);
            
            // IsLocalDataChannel:false; IsLocalAudioTrack:false ; IsLocalVideoTrack:false
            conn = new WebSocket("ws://"+wsurl+'/'+meid);
            outThat.conn = conn;
             //when we got a message from a signaling server
            conn.onmessage = function (msg) {
                var data = JSON.parse(msg.data);
                console.log(data);
                switch(data.eventName) {
                case "_peers":
                    // ==>2 handleCreate---- //
                    handleCreate(data.data);
                    break;
                case "_offer":
                    // ==>5 ---- offer //
                    handleOffer(data.data);
                    break;
                case "_answer":
                    handleAnswer(data.data);
                    break;
                case "_ice_candidate":
                    // ==>18 _ice_candidate
                    handleCandidate(data.data);
                    break;
                case "_session_disconnected":
                    handleLeave();
                    break;
                case "_post_message":
                    handlePostMessage(data.data);
                    break;
                case "_connectinfo":
                    handleConnectInfo(data.data);			   
                    break;
                case "_remove_peer":
                    outThat.isVideoPlay = false;
                    console.log("=============_remove_peer===============")
                    outThat.urgencySureFlag = false;
                    outThat.videoFlag = false;
                    handleLeave();
                    break;
                default:
                console.log("Got default message", msg.data);
                    break;
                }
            };
            conn.onerror = function (err) {
                IsWebSocketConnected = false;
                console.log("websocket onerror", err);
            };
            conn.onclose = function (data) {
                IsWebSocketConnected = false;
                console.log("websocket  onclose",data);
                handleLeave();
            };
            conn.onopen = function () {
                    console.log("websocket open");
                    // ==>1 ---- //
                    IsWebSocketConnected = true;
                    sendToServer({
                        "eventName": "__join",
                        "data": {
                            "sessionId": sessionId,
                            "messageId": uuid(),
                            "from": meid,
                            "to": peerid,
                            "type":"web"
                        }
                    });
    
            };
        };
        function uuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 12; i++) {
                 s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[4] = s[8] = "-";
            var uuid = s.join("");
            return uuid;
        };
        function handleConnectInfo(data) {
                  console.log("Got ConnectInfo Message:", data.message);
        };
        /**
         * websocket for sending JSON encoded messages
         * 发送给服务器，然后服务器再转发给另外一个客户端
         * @param message
         */
        function sendToServer(message) {
            if(conn!= null){
                 conn.send(JSON.stringify(message));
            }
        };
        /**
         * 当登录进服务器时，服务器会回复给我们，需要根据成功还是失败进行处理
         * @param success
         */
        function handleCreate(data) {
            console.log("WebSocket _create", data);
            //获取所有服务器上的
            if (data.state === "online") {
                IsWebSocketCreateed = true;
                if (data.iceServer !== null || data.iceServer !== undefined || data.iceServer !== '') { 
            //console.log("WebSocket iceServers", data.iceServers); 
            //服务器把ICE 服务的信息下发到js创建RTCPeerConnection使用             	
                    // 进入 得到 configuration---- //
                    console.log("--------------------->>>>>>------");
                    console.log(configuration);
                    console.log(data.iceServer);
                    configuration.iceServers = JSON.parse(JSON.stringify(data.iceServer));
                    console.log(configuration);
                }
                if(StartCalled ==false){
                    // ==>3 call---- //
                    console.log("handleCreate  start call"); 
                    Call();
                }else{
                    console.log("handleCreate  StartCalled=",StartCalled);
                }
            } else {
                console.log("WebSocket _create  offline");      
                outThat.videoFlag = false;   
                outThat.urgencySureFlag = false;
            }
        };
        /**
         * 发送Call 命令。通知设备端发起 offer 
         * @param 
         * user  pwd  这个是设备端认证用户跟密码，设备端通过 webrtc_streamer_authentication_callback 这个回调认证用户跟密码。返回是0时是认证不通过
         *       如果您不需要认证。这两项可以去掉
         */
        async function Call() {
                console.log("call");     
                StartCalled = true;
                var audioenable = "sendrecv"
                var videoenable = "sendrecv"
                var datachannelenable = "true"
               if(IsLocalDataChannel == false){
                    datachannelenable = "false"
               }
               if(IsLocalAudioTrack == false){
                    audioenable = "recvonly"
               }
               // IsLocalVideoTrack: false
               if(IsLocalVideoTrack == false){
                    videoenable = "recvonly"
               }
               //call audio  sendrecv  video  recvonly  datachannel true   --true 
               // videoenable:false  audioenable:true  datachannelenable :true;
               console.log("call audio ",audioenable," video ",videoenable," datachannel",datachannelenable); 
                   // ==>4 ---- sendToServer //
                sendToServer({
                    "eventName": "__call",
                    "data": {
                        "sessionId": sessionId,
                        "from": meid,
                        "messageId": uuid(),
                        "to": peerid,
                        "type": "web",
                        "mode": connectmode,
                        "source": connectsource,
                        "datachannel": datachannelenable,
                        "audio": audioenable,
                        "video": videoenable,
                        "user": "admin",
                        "pwd": "123456",
                        "iceServer": configuration
                    }
                });
        };
        /**
         * when 设备端发过来 offer
         * @param offer 表示offer
         * @returns {Promise<void>}
         *  设备端发送  offer 后。先创建 RTCPeerConnection 然后设置 setRemoteDescription 后返回 answner 发送给设备端
         */
        async function handleOffer(data) {
            //如果没创建RTCPeerConnection,需要重新创建连接对象，否则不需要
            console.log("Offer --- ---- sdp  :\n", data.sdp);
            // ==>6. initPeerConnection
            if(RTCPeerConnectionCreated == false) {
                initPeerConnection();
            }
            console.log("===========================");
            console.log("initPeerConnection end");
            var oldSdp = data.sdp.sdp;
            var lines = oldSdp.split("\r\n");
            var newSdp = "";
            lines.forEach(item => {
                if(item.indexOf("packetization-mode")==-1){
                    if(item!=""){
                        newSdp =  newSdp + item+ "\r\n";
                    }
                }
            });
            data.sdp.sdp = newSdp;
            console.log("new sdpParams:",data.sdp);
            let nativeRTCSessionDescription = (window.mozRTCSessionDescription || window.RTCSessionDescription );
            // ==>8. createAnswer setRemoteDescription
            myPeerConnection.setRemoteDescription(new nativeRTCSessionDescription(data.sdp));
            //create an answer to an offer
            console.log("myPeerConnection.createAnswer()");
            myPeerConnection.createAnswer().then(function (answer) {
                // ==>11 answer
                console.log(answer);
                myPeerConnection.setLocalDescription(answer);
                      console.log("Answer sdp :\n" + answer.sdp);
                      // ==>12 sendToServer
                     sendToServer({
                        "eventName": "__answer",
                        "data": {
                            "sessionId": sessionId,
                            "messageId": uuid(),
                            "from": meid,
                            "to": peerid,
                            "type": answer.type,
                            "sdp": {
                                "type":"answer",
                                "sdp":answer.sdp
                            }
                        }
                    });
            }).catch(function (error) {
                    console.log("Error when create  Answer-----------------------------");
                sendDisconnect();
            });
        };
        /**
         * when we got an answer from a remote user
         * @param answer 对方发过来的answer
         * @returns {Promise<void>}
         */
        async function handleAnswer(answer) {
            let nativeRTCSessionDescription = (window.mozRTCSessionDescription || window.RTCSessionDescription);
            await myPeerConnection.setRemoteDescription(new nativeRTCSessionDescription({type:answer.type, sdp:answer.sdp}));
        };
        /**
         * when we got an ice candidate from a remote user
         * @param candidate 对方法发过来的candidate
         */
        function handleCandidate(data) {
            console.log(data);
             console.log("candidate --- ----   :", data.candidate);
            console.log(myPeerConnection);
            console.log(RTCPeerConnectionCreated);
             if(myPeerConnection!= null && RTCPeerConnectionCreated==true){    
                let nativeRTCIceCandidate = (window.mozRTCIceCandidate || window.RTCIceCandidate);
                var candidate = new nativeRTCIceCandidate({sdpMLineIndex:data.sdpMLineIndex, candidate:data.candidate});
                console.log('==>19 addIceCandidate');
                console.log(candidate);
                // ==>19 myPeerConnection.addIceCandidate(candidate);
                myPeerConnection.addIceCandidate(candidate);

                // remoteVideo.play();
            }else{
              IceCandidate.push(data);
            }
        };
        /**
         *  发送断开命令给客户端
         */
        function sendDisconnect() {
                  sendToServer({
                        "eventName": "__disconnected",
                        "data": {
                            "sessionId": sessionId,
                            "sessionType": "IE",
                            "messageId": uuid(),
                            "from": meid,
                            "to": peerid
                        }
                    });
        }
        /**
         * 断开连接的处理逻辑
         */
        function handleLeave() {
            // outThat.videoFlag = false;
            // Disconnect all our event listeners; we don't want stray events
            // to interfere with the hangup while it's ongoing.
            if(myDataChannel!= null){
                myDataChannel.onopen = null;
                myDataChannel.onclose = null;
                myDataChannel.onmessage = null;
                myDataChannel.onerror = null;
                myDataChannel.close();
                myDataChannel = null;
            }
            if(myPeerConnection!= null){
              myPeerConnection.onicecandidate = null;
              myPeerConnection.onaddstream = null;
              myPeerConnection.ontrack = null;
              myPeerConnection.onsignalingstatechange = null;
              myPeerConnection.onicegatheringstatechange = null;
              //myPeerConnection.onnotificationneeded = null;
              myPeerConnection.close();
              myPeerConnection = null;
            }
            RTCPeerConnectionCreated = false;
        };
        function getObjectURL(stream) {
                      var url = null ;
                      try {
                              if (window.createObjectURL!=undefined) { // basic
                                url = window.createObjectURL(stream) ;
                              } else if (window.URL!=undefined) { // mozilla(firefox)
                                url = window.URL.createObjectURL(stream) ;
                              } else if (window.webkitURL!=undefined) { // webkit or chrome
                                url = window.webkitURL.createObjectURL(stream) ;
                              }
                       }
                       catch (error) {
                          url = null;
                       }
                      return url ;
        }
        //**********************
        //Init a peer connection
        //**********************
        function initPeerConnection()
        {
            //因为各浏览器差异，RTCPeerConnection 一样需要加上前缀。
             let PeerConnection = (window.RTCPeerConnection || window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection);
             try {
                console.log('initPeerConnection create PeerConnection configuration =');
                console.log(configuration);
                myPeerConnection = new PeerConnection(configuration);
                console.log(myPeerConnection);
                if(myPeerConnection!=null){
                    console.log('myPeerConnection!=null');
                    console.log('PeerConnection  addTrack  stream is null');
                       // if ("addTrack" in myPeerConnection) {
                    // 	console.log('addTrack in myPeerConnection');
                    // 	console.log(stream);
                    // 	// stream : null 
                       // 	//console.log('PeerConnection use addTrack');
                    // 	if(stream!= null){
                    // 		console.log('stream!= null');
                    // 		stream.getTracks().forEach(track => {
                    // 		    myPeerConnection.addTrack(track, stream);
                    // 			console.log('PeerConnection use addTrack type',track.kind);
                    // 		});
                    // 	}else{
                    //    		console.log('PeerConnection  addTrack  stream is null');
                       // 	}
                    // } else {
                       //  	console.log('PeerConnection use addStream');
                    // 	if(stream!= null){
                    //         myPeerConnection.addStream(stream);
                    // 	}else{
                    // 		console.log('PeerConnection  addStream is null');
                    // 	}
                    // }
                    //**********************
                    //Register event process needed
                    //**********************
                    // setup stream listening
                    // ==>7 "ontrack" in myPeerConnection
                    // 注意,不需要get.UserMedia
                    myPeerConnection.ontrack = handleRemoteTrackAdded;
                    //myPeerConnection.ontrack = handleRemoteTrackAdded 
                    // if ("ontrack" in myPeerConnection) {
                    // 	console.log('myPeerConnection.ontrack = handleRemoteTrackAdded');
                    //     //when a remote user adds stream to the peer connection, we display it
                    //     myPeerConnection.ontrack = handleRemoteTrackAdded;
                    // } else {
                    // 	console.log('myPeerConnection.onaddstream = handleRemoteStreamAdded');
                    //     //when a remote user adds stream to the peer connection, we display it
                    //     myPeerConnection.onaddstream = handleRemoteStreamAdded;
                    // }
                    // Setup other events
                    myPeerConnection.onicecandidate = handleIceCandidate;
                    myPeerConnection.oniceconnectionstatechange = handleIceConnectionStateChangeEvent;
                    myPeerConnection.onicegatheringstatechange = handleIceGatheringStateChangeEvent;
                    myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
                    //myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
                    // IsLocalDataChannel == true;
                    try {
                        myDataChannel = myPeerConnection.createDataChannel("mydatachannel");
                        if(myDataChannel){
                            myDataChannel.onopen = handleDataChannelOnOpen;
                            myDataChannel.onclose = handleDataChannelOnClose;
                            myDataChannel.onmessage = handleDataChannelOnMessage;
                            myDataChannel.onerror = handleDataChannelOnError;
                        }
                    } catch (error) {
                           console.log("data_channel_create_error  ");
                    }
                    console.log('Sucessed to create PeerConnection');
                        RTCPeerConnectionCreated = true;
                }else{
                     console.log('Failed to create PeerConnection');
                    RTCPeerConnectionCreated = false;
                }
            }catch (e) {
                console.log('Failed to create PeerConnection, exception: ' + e.message);
                RTCPeerConnectionCreated = false;
                return;
            }
        }
        //RTCDataChannel  处理函数
        // 主要有  onopen ，onclose，onmessage，onerror
        ////////////////////////////////////////////////////////////////////////
        function handleDataChannelOnOpen() {
            console.log('handleDataChannelOnOpen');
        };
        function handleDataChannelOnClose(event) {
            console.log('handleDataChannelOnClose ',event);
        };
        function handleDataChannelOnMessage(message) {
            console.log('handleDataChannelOnMessage ',message);
                    var json;
                    json = JSON.parse(message.data);
                    if (json.type === '__file') {
                    }else if (json.type === '__msg') {
                    console.log('handleDataChannelOnClose recive message data',json.data);
                    } else {
                        console.log('handleDataChannelOnClose recive message data',json.data);
                    }
        };
        function handleDataChannelOnError(err) {
            console.log('handleDataChannelOnError ',err);
        };
        /////////////////////////////////////////////////////////////////////////////
        // Handles |icecandidate| events by forwarding the specified
        // ICE candidate (created by our local ICE agent) to the other
        // peer through the signaling server.
        async function handleIceCandidate(event) {
            //  ==>15 handleIceCandidate sendIce
            if (event.candidate) {
                console.log('onicecandidate: ' + event.candidate.candidate);
                sendToServer({
                            "eventName": "__ice_candidate",
                            "data": {
                                "sessionId": sessionId,
                                "messageId": uuid(),
                                "to": peerid,
                                "from": meid,
                                "sdpMid":"audio",
                                   "sdpMLineIndex":0,
                                "label": event.candidate.sdpMLineIndex,
                                "candidate": event.candidate.candidate
                            }
                        });
            }
        }
        // Called by the WebRTC layer when events occur on the media tracks
        // on our WebRTC call. This includes when streams are added to and
        // removed from the call.
        //
        // track events include the following fields:
        //
        // RTCRtpReceiver       receiver
        // MediaStreamTrack     track
        // MediaStream[]        streams
        // RTCRtpTransceiver    transceiver
        //
        // In our case, we're just taking the first stream found and attaching
        // it to the <video> element for incoming media.
        async function handleRemoteTrackAdded(e) {
            // ==>9. handleRemoteTrackAdded
            if(remoteVideo!=null){
                if ("srcObject" in remoteVideo) {
                    console.log("handleRemoteTrackAdded attachStream srcObject stream id = ",e.streams[0].id);
                    console.log(e.streams[0]);
                    console.log(e.streams[0].getTracks());
                    // handleRemoteTrackAdded  type audio
                    // handleRemoteTrackAdded  type video
                    e.streams[0].getTracks().forEach(track => {
                        console.log('handleRemoteTrackAdded  type',track.kind);
                    }); 
                    // ==>10. remoteVideo set remoteSrc;
                    remoteVideo.srcObject = e.streams[0];
                    if(isChrome==false){
                        console.log("remoteVideo.play");
                        remoteVideo.play();
                    }
                } else {
                        // 防止在新的浏览器里使用它，应为它已经不再支持了
                       var objUrl=  getObjectURL(e.streams[0]);
                       console.log("handleRemoteTrackAdded attachStream getObjectURL stream id = ",e.streams[0].id); 
                       remoteVideo.src = objUrl;
                       if(isChrome==false){
                        remoteVideo.play();
                       }
                }
            }
        }
        //since addstream is desperated
        async function handleRemoteStreamAdded(e) {
        
            if(remoteVideo!=null){
            
                if ("srcObject" in remoteVideo) {
                                console.log("handleRemoteStreamAdded attachStream srcObject stream id = ",e.stream.id);  
                        remoteVideo.srcObject =  e.stream;
                         if(isChrome==false){
                        remoteVideo.play();
                        }
            } else {
                        // 防止在新的浏览器里使用它，应为它已经不再支持了
                       var objUrl=  getObjectURL( e.stream);
                       console.log("handleRemoteStreamAdded attachStream getObjectURL stream id = ",e.stream.id); 
                       remoteVideo.src = objUrl;
                       if(isChrome==false){
                       remoteVideo.play();
                       }
            }
            }
        }
        /**
         * getUserMedia的then
         * @param myStream
         */
        function streamHandler(myStream) {
            console.log("::streamHandler",myStream);
            stream = myStream;
            //displaying local video stream on the page
            window.localStream  = stream;
             if ("getTracks" in stream) {
                console.log('streamHandler getTracks');
                if(stream!= null){
                  stream.getTracks().forEach(track => {		        
                    console.log('streamHandler getTracks type',track.kind);
                    if(track.kind==="audio"){
                        IsLocalAudioTrack = true;
                    }else if(track.kind==="video"){
                        IsLocalVideoTrack = true;
                    }
                    });
                    }
             }
            if(StartCalled == false && IsWebSocketCreateed == true){
            console.log("streamHandler  start call"); 
            Call();
            }
        }
        // Handle |iceconnectionstatechange| events. This will detect
        // when the ICE connection is closed, failed, or disconnected.
        //
        // This is called when the state of the ICE agent changes.
        async function handleIceConnectionStateChangeEvent(event) {
            if(myPeerConnection == null){
                return;
            }
            console.log("*** ICE connection state changed to " + myPeerConnection.iceConnectionState);
            // ==>20 checking = >>> connected
            switch(myPeerConnection.iceConnectionState) {
                case "closed":
                case "failed":
                case "disconnected":
                    handleLeave();
                    break;
                case "connected":
                    break;
            }
        }
        // Handle the |icegatheringstatechange| event. This lets us know what the
        // ICE engine is currently working on: "new" means no networking has happened
        // yet, "gathering" means the ICE engine is currently gathering candidates,
        // and "complete" means gathering is complete. Note that the engine can
        // alternate between "gathering" and "complete" repeatedly as needs and
        // circumstances change.
        //
        // We don't need to do anything when this happens, but we log it to the
        // console so you can see what's going on when playing with the sample.
        async function handleIceGatheringStateChangeEvent(event) {
            if(myPeerConnection == null){
                return;
            }
            // ==>14 myPeerConnection.iceGatheringState: gathering
            // ==>16 myPeerConnection.iceGatheringState: complete
            console.log("*** ICE gathering state changed to: " + myPeerConnection.iceGatheringState);
        }
        // Set up a |signalingstatechange| event handler. This will detect when
        // the signaling connection is closed.
        //
        // NOTE: This will actually move to the new RTCPeerConnectionState enum
        // returned in the property RTCPeerConnection.connectionState when
        // browsers catch up with the latest version of the specification!
        async function handleSignalingStateChangeEvent(event) {
            // ==>7.  myPeerConnection.signalingState :: have-remote-offer
            // ==>13  myPeerConnection.signalingState :: stable
            if(myPeerConnection == null){
                return;
            }
            //  myPeerConnection.signalingState :: have-remote-offer
            console.log("*** WebRTC signaling state changed to: " + myPeerConnection.signalingState);
            switch(myPeerConnection.signalingState) {
                case "closed":
                    handleLeave();
                    break;
            }
        }
        //通过信令通道 PostMessage
        function PostMessage  (message,callback) {
                if(IsWebSocketConnected==true ){   		  
                        var messageid = uuid();
                        messagecallback=callback;
                     sendToServer({
                        "eventName": "__post_message",
                        "data": {
                            "sessionType": "IE",
                            "messageId": messageid,
                            "to": peerid,
                            "from":meid,
                            "message": message
                        }
                    });
                }else{    		   
                }
        };
        //通过信令通道 收到  PostMessage 的返回结果
        function handlePostMessage(data){
        
                           var messageid =  data.messageId;       	 
                       if(messagecallback===undefined  || messagecallback===null){
                         }else{
                         typeof(messagecallback)==='function'&&messagecallback(data.message);
                          messagecallback = null;
                       }  
        };
        //通过 datachannel 发送信息到设备端
        function DataChannelSendMessage(message) {
            if(myDataChannel!= null){
                if (myDataChannel.readyState.toLowerCase() === 'open') {
                    myDataChannel.send(JSON.stringify({
                        type: "__msg",
                        data: message
                    }));
                }else{
                      console.log("Failed sendMessage   ------------------------- -----",myDataChannel.readyState.toLowerCase());
                }
            }
        };
      },
    
    /* 
      紧急确认
    */
    handleUrgencySure(){
      // this.rowAlartId="";//by guo 清空点击的报警id
      this.rowAlartId="";//by guo 清空点击的报警id
      this.alertVideoFlag=false;//报警录像是否存在  false不存在
      if(this.alertPlayFlag && this.urgencySureFlag){
        this.alertPlayFlag = false;
        this.urgencySureFlag = false;
      }
      if(this.urgencySureFlag==false){
        // if(this.cameraStatus=="online"){
          this.$postForm("dmc/camera/live", {deviceNo:this.deviceNo},this.acceptLanguage).then(res => {
          if(res.code == 200){
            this.cameraInfo = res.result;
            this.videoFlag=true;//点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
            this.alertPlayFlag = false;
            this.urgencySureFlag=true;//by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
            setTimeout(()=>{
              this.initSkyRtc();
            },10)
          }else{
            this.$message({message:res.message,type:'error'})
          }
        });
        // }else{
        //   this.$message({message:this.$t("m.roomGeneralViewManagement").cameraOffline,type:"error"});
        // }
      }else{
        this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
        this.urgencySureFlag=false;//by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
      }
    },

    /* 
      处理报警列表的报警类型
    */
    formatAlertType(row ,column, cellValue){
      switch(row.alertType) {
        case 0:
          return this.$t("m.roomGeneralViewManagement").alertTypeZero;
          break;
        case 1:
          return this.$t("m.roomGeneralViewManagement").alertTypeOne;
          break;
        case 2:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwo;
          break;
        case 3:
          return this.$t("m.roomGeneralViewManagement").alertTypeThree;
          break;
        case 4:
          return this.$t("m.roomGeneralViewManagement").alertTypeFour;
          break;
        case 5:
          return this.$t("m.roomGeneralViewManagement").alertTypeFive;
          break;
        case 6:
          return this.$t("m.roomGeneralViewManagement").alertTypeSix;
          break;
        case 7:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeven;
          break;
        case 8:
          return this.$t("m.roomGeneralViewManagement").alertTypeEigth;
          break;
        case 9:
          return this.$t("m.roomGeneralViewManagement").alertTypeNine;
          break;
        case 10:
          return this.$t("m.roomGeneralViewManagement").alertTypeTen;
          break;
        case 11:
          return this.$t("m.roomGeneralViewManagement").alertTypeEleven;
          break;
        case 12:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwelve;
          break;
        case 13:
          return this.$t("m.roomGeneralViewManagement").alertTypeThirteen;
          break;
        case 14:
          return this.$t("m.roomGeneralViewManagement").alertTypeFourteen;
          break;
        case 15:
          return this.$t("m.roomGeneralViewManagement").alertTypeFifteen;
          break;
        case 16:
          return this.$t("m.roomGeneralViewManagement").alertTypeSixteen;
          break;
        case 17:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeventeen;
          break;
        //by guo 2020-3-9-11:56注释  需求变更  呼吸和心跳又合并为1个
        // case 18:
        //   return this.$t("m.roomGeneralViewManagement").alertTypeEighteen;
        //   break;
        case 20:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwenty;
          break;
        case 21:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyone;
          break;
        case 22:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentytwo;
          break;
        case 23:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentythree;
          break;
        case 24:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyfour;
          break;
      }
    },
    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数 
      this.PageSize=val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      //isHandle==0未处理的
      if (row.isHandle==0) {
        //return "background-color: #efefef";
        return "background-color: #ffffff;color:#3e4b53";
      } else {
        //return "background-color: #f9f9f9";
        return "background-color: #bee1f4;color:#3e4b53";
      }
    },
    //设置模糊度
    initAlpha() {
      var alphaValue = 0;
      this.$postJson('omc/lifeAmbiguity/select',{},
         this.acceptLanguage).then(res =>{
            if(res.code == 200 && res.result.length!=0){
              if (Number(res.result[0].ambiguity) == null) {
                alphaValue = 0;
              } else {
                alphaValue = Number(res.result[0].ambiguity);
              }
              this.filterBlur='filter-blur'+alphaValue;
           }
      });
     
     
    },
    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },

  },
  computed: {
    player() {
      console.log(this.videoFlag,"------");
      if(this.videoFlag==true){
        return this.$refs.videoPlayer.player;
      }else{
        return this.$refs.videoPlayer.pause;
      }
    }
  },
  created() {
    this.groupId=sessionStorage.getItem("groupId");
    this.roomId=sessionStorage.getItem("lifeRoomDetail_roomId");
    this.queryDevice(this.roomId);
    this.queryDeviceAlertLifeRoom(this.roomId);
    this.queryRoomAlartStatus(this.roomId);
  },
  mounted() {
    this.mqttMSG();
    this.initAlpha();
    this.$bus.$on("changeLifeAlarm_websocket",()=>{
      console.log("接收到新的报警信息，刷新房间详情报警列表的数据--------房间一览详情");
      this.queryDeviceAlertLifeRoom(this.roomId);
    })
    if(sessionStorage.getItem('language')=='ja_JP'){
      this.languageClass=true;
    }else{
      this.languageClass=false;
    }
  },
  destroyed() {
    this.client.end();//断开mqtt的连接  组件销毁后需要断开mqtt的连接 否则后端就会一直推送消息影响性能
    //this.$bus.$emit("roomWebsocket");//先注释掉
  },
  components:{
    KtButton,
    videoPlayer,
  }
};
</script>
<style lang="scss" scoped>
.roomGeneralViewDetail {
  overflow-x: hidden;
  padding-bottom: 30px;
  .height40 {
    height: 44px;
    line-height: 44px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .height50 {
    height: 35px;
    line-height: 30px;
    .height50-itemName {
      color: #999999;
    }
  }
  .startTimeSecond{
    width:100px;
  }
  .moHu{
    position: relative;
  }
  #videoSmBig{
    position:absolute;
    z-index:10;
    bottom: 24px;
    margin-left: 100%;
    right: 7px;
    color: white;
    height: 50px;
    font-size: 30px;
  }
  #videoPlayPause{
    position:absolute;
    z-index:10;
    bottom: 25px;
    left: 5px;
    color: white;
    height: 50px;
    font-size: 32px;
  }
  #pixi {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .roomGeneralViewDetail-c {
    // width: 50%;
    width: 68%;//by guo 2020-3-9-13:58修改
    max-height: 350px;
    margin:10px 0;
    // overflow-y: auto;
  }
  .roomGeneralViewDetail-d{
    width:50%;
    margin-top:20px;
  }
  .roomGeneralViewDetail-e{
    width:50%;
    margin:0;
  }
  .roomGeneralViewDetail-f{
    margin: 30px 0 5px;
  }
  .btn0{
    background: #dddddd;
    color:#000000;
  }
  .btn1{
    background: #409efe;
    color:#ffffff;
  }
  .btn2{
    background: #fe0000;
    color:#ffffff;
  }
}
  /* 定义keyframe动画，命名为blink */
  @keyframes blink{
    0%{opacity: 1;}
    100%{opacity: 0;} 
  }
  /* 添加兼容性前缀 */
  @-webkit-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  @-moz-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  @-ms-keyframes blink {
    0% {opacity: 1; } 
    100% { opacity: 0;}
  }
  @-o-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  /* 定义blink类*/
  .blink{
    color: #dd4814;
    animation: blink 1s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
  }
  /deep/ .vjs_video_817-dimensions {
    width: 600px !important;
    height: 420px !important;
  }
  /deep/ .roomGeneralViewDetail-c .el-pagination__total{
    margin-right:0px !important; 
  }
  /deep/ .roomGeneralViewDetail-c .el-pagination__jump{
    margin-left:0px !important;
  }
  .remotevideo{
    margin: 0 auto;
    width: 100%;
    min-height: 420px;
    height: 420px;
    object-fit: fill;
    position: relative;
  }
  .filter-blur7 {
    filter: blur(7px) grayscale(100%) opacity(50%);
  }
  .filter-blur6 {
    filter: blur(6px) grayscale(100%);
  }
  .filter-blur5 {
    filter: blur(5px) grayscale(100%);
  }
  .filter-blur4 {
    filter: blur(4px) grayscale(100%);
  }
  .filter-blur3 {
    filter: blur(3px) grayscale(100%) contrast(150%);
  }
  .filter-blur2 {
    filter: blur(2px) grayscale(100%) contrast(150%);
  }
  .filter-blur1 {
    filter: blur(1px) grayscale(100%);
  }
  .filter-blur0 {
    filter: blur(0px);
  }
  .Ckplayer{
    margin: 0 auto;
    width: 100%;
    height: 420px;
    position: relative;
  }
  #video {
    width: 100%;
    height: 420px;
  }
  .arc {
       --width: 100%;
       --height: 100%;
        position: absolute;
        margin: auto;
        left: calc(var(--width)/2 - 25px);
        top:  calc(var(--height)/2 - 25px);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border-top: 2px solid #ffea29;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        animation: rt 2s infinite linear;
   }
   .arc::before {
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 0;
     height: 0;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     border-top: 2px solid #8d29ff;
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
     animation: rt 4s infinite linear reverse;
     content: "";
   }
   .arc::after {
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 0;
     height: 0;
     width: 0;
     height: 0;
     border-radius: 50%;
     border-top: initial;
     border-left: initial;
     border-right: initial;
     animation: cw 1s infinite;
     content: "";
     background:  snow;
   }
  @media (min-width: 1024px){ 
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:90%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:90%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:350px;
    }
  }
  @media (min-width: 1100px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:90%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:100%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:370px;
    }
  }
  @media (min-width: 1366px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:75%;
        font-size:16px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:100%;
        font-size:16px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:390px;
    }
  }
  @media (min-width: 1440px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:70%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:100%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:400px;
    }
  }
  @media (min-width: 1600px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:65%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:92%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:420px;
    }
  }
  @media (min-width: 1680px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:65%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:92%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:420px;
    }
  }
  @media (min-width: 1920px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:50%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:73%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:420px;
    }
  }
  @media (min-width: 2100px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 10px;
      .alarmMessage{
        background: #f9d004;
        width:47%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:65%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:470px;
    }
  }
</style>